<script setup  lang="ts">
import { ref } from 'vue';

type PropsType = { handleAddItem: (content: string) => void }

const inputValue = ref('')
const Props = defineProps<PropsType>()

/** 键盘回车新增事件 */
const handleKeydown = (e: KeyboardEvent) => {
  if (e.key === 'Enter') {
    if (inputValue.value.trim()) {
      Props.handleAddItem(inputValue.value)
      inputValue.value = ''
    }
  }
  if (e.key === 'Escape') inputValue.value = ''

}
</script>

<template>
  <header class="header">
    <h1>todos</h1>
    <input
      class="new-todo"
      placeholder="What needs to be done?"
      autofocus
      v-model="inputValue"
      @keydown="handleKeydown"
    />
  </header>
</template>

<style lang="less" scoped></style>
